<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>身份证</title>
    <meta name="keywords" content="身份证"/>
    <script src="https://fe.bdplus.cn/lib/js/jquery.js"></script>
    <!-- <script src="http://fe.xhanglu.com/lib/js/jquery.js"></script> -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .m {
            width: 500px;
            margin: 100px auto;
        }
        .error {
            border: 1px solid red;
        }
        input {
            width: 500px;
            height: 50px;
            border: 1px solid #ccc;
            line-height: 50px;
            font-size: 40px;
        }
        span {
            display: block;
            height: 50px;
            line-height: 50px;
            font-size: 40px;
        }
    </style>
</head>
<body>
<div class="m">
    <input type="text" id="test"/>
    <span></span>
</div>
<div id="demo">
        <form action="">
            <input type="text" maxlength="3">
            <input type="text" maxlength="3">
            <input type="text" maxlength="3">
            <input type="text" maxlength="3">
            <input type="text" maxlength="3">
            <input type="text" maxlength="3">
        </form>
</div>
<script>
    var demo=document.getElementById('demo');
        input=demo.getElementsByTagName('input');
        var iNow=0;
        type   = !-[1,] ? 'onpropertychange' : 'oninput',
                limit  = 3; //满足自动切换焦点的字符数
        for(var i=0;i<input.length-1;i++){
            input[i].index=i;
            input[i][type]=function () {
                iNow=this.index;
                var that=this;
                setTimeout(function () {
                   that.value.length>limit-1&&input[iNow+1].focus();
                },0)
            }
        }
    function cardId(val) {
        //aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};
        var aCity = "11,12,13,14,15,21,22,23,31,32,33,34,35,36,37,41,42,43,44,45,46,50,51,52,53,54,61,62,63,64,65,71,81,82,91";
        var iSum = 0;
        var cardlen = val.length;
        if (cardlen == 15) {
            return false;
        }
        if (!/^\d{17}(\d|[x|X])$/i.test(val) && !/^\d{15}$/i.test(val) && !/^\d{18}$/i.test(val)) {
            return false;
        }
        //在后面的运算中x相当于数字10,所以转换成a
        var aVal = val.replace(/[x|X]$/i, "a");
        var curCity = aVal.substr(0, 2);
        if (!(aCity.indexOf(curCity) >= 0)) {
            return false;
        }
        if (cardlen == 18) {
            // var code = val.split('');
            //∑(ai×Wi)(mod 11)
            //加权因子
            var factor = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ];
            //校验位
            var parity = [ 1, 0, 'a', 9, 8, 7, 6, 5, 4, 3, 2 ];
            var sum = 0;
            var ai = 0;
            var wi = 0;
            for (var i = 0; i < 17; i++)
            {
                ai = aVal[i];
                wi = factor[i];
                sum += ai * wi;
            }
            if(parity[sum % 11] != aVal[17]){
                return false;
            }
        }
        return true;
    }
    $('#test').blur(function(){
        var val = $(this).val();
        if(cardId(val)){
            $('span').html('对的身份证').css({
                "color":"#333"
            })
        }else {
            $('span').html('错的身份证').css({
                "color":"red"
            })
        }
    })
</script>
</body>
</html>